<template>
  <view class="commodity">
    <view class="detail-box">
      <view class="detail" :class="type == 'detail' ? 'order-border' : ''">
        <view class="line-1 display-s-center">
          <view class="display">
            <view class="name">{{ commodityObj.goodsName }}</view>
            <!-- <view class="tag" v-if="type == 'detail'"></view> -->
          </view>
          <view v-if="type == 'detail'" class="num">x{{ commodityObj.num }}</view>
          <view v-if="type == 'goods'" class="" @click="addCart">
            <image src="../static/cart-icon.png" style="width: 55rpx; height: 55rpx"></image>
          </view>
        </view>
        <view class="line-2 display">
          <view class="label">厂家：</view>
          <view class="text">
            {{ commodityObj.manufacturer }}
          </view>
        </view>
        <view class="line-2 display">
          <view class="label">规格：</view>
          <view class="text">
            {{ commodityObj.simpleSpecs }}
          </view>
        </view>
        <view class="line-2 display">
          <view class="label">效期：</view>
          <view class="text">
            {{ commodityObj.expirationDate }}
          </view>
        </view>
        <!-- //订单详情 -->
        <view v-if="type == 'detail'" class="line-3 display">
          <view class="pirce">
            售价：<text style="font-size: 25rpx; color: #ef231b">￥</text>
            <text style="font-size: 33rpx; color: #ef231b">{{ commodityObj.goodsPrice }}</text>
            <text style="font-size: 25rpx; color: #8d8d8d">/盒</text>
          </view>
          <view class="num" v-if="commodityObj.outboundNum">
            出库：{{ commodityObj.outboundNum }}
          </view>
        </view>
        <!-- 购物车详情  |  settlement 订单结算  | goods 搜索商品详情-->
        <view v-if="type == 'cart' || type == 'settlement' || type == 'goods'" class="cart-info">
          <view
            class="line-2 display font-c-red"
            v-if="commodityObj.discountMsg || commodityObj.giftMsg"
          >
            <view class="label">活动：</view>
            <view class="text">
              <view v-if="commodityObj.discountMsg">{{ commodityObj.discountMsg }}</view>
              <view v-if="commodityObj.giftMsg">{{ commodityObj.giftMsg }}</view>
            </view>
          </view>
          <!-- <view class="line-2 display">
            <view class="display" style="margin-right: 31rpx" v-if="commodityObj.cost">
              <view class="label">成本：</view>
              <view class="text font-c-blue"> {{ commodityObj.cost }} </view>
            </view>
            <view class="display" v-if="commodityObj.price">
              <view class="label">参考价：</view>
              <view class="text font-c-blue"> {{ commodityObj.price }} </view>
            </view>
          </view> -->
          <view class="line-2 display">
            <view class="display" style="margin-right: 31rpx">
              <view class="label">库存：</view>
              <view class="text font-c-blue"> {{ commodityObj.quantity }} </view>
            </view>
          </view>
          <!-- 购物车详情  |  搜索商品详情-->
          <view v-if="type == 'cart' || type == 'goods'" class="price-num display-s-center">
            <view class="display flex-baseline">
              <view class=""> 单价 : </view>
              <view class="display flex-baseline">
                <span style="font-size: 25rpx; margin: 0 6rpx 0 13rpx">￥</span>
                <input @blur="verify" type="digit" v-model="price" class="price" />
                <span class="measurement">/{{ commodityObj.goodsUnit }}</span>
              </view>
            </view>
            <view class="display-s-center good-num">
              <span class="subtract" @click="changeNum(-1)"></span>

              <text class="num" @click="numberChange">{{ num }}</text>
              <span class="add" @click="changeNum(1)"></span>
            </view>
          </view>
          <!-- settlement 订单结算 -->
          <view v-if="type == 'settlement'" class="display-s-center flex-baseline">
            <view class="display flex-baseline">
              <view class=""> 单价 : </view>
              <view class="display flex-baseline">
                <span style="font-size: 25rpx; margin: 0 4rpx 0 13rpx; color: #ef231b">￥</span>
                <span style="font-size: 42rpx; color: #ef231b">{{ price }}</span>
                <span class="measurement" style="font-size: 25rpx; color: #8d8d8d"
                  >/{{ commodityObj.goodsUnit }}</span
                >
              </view>
            </view>
            <view class="display-s-center" style="font-size: 29rpx"> x{{ num }} </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 修改数量弹框 -->
    <div class="bgc" @click.stop="isChangeNum = false" v-if="isChangeNum">
      <div class="addCar" @click.stop="">
        <div class="addNum">
          <div class="reduce" @click.stop="inputNumChange(-1)"><i></i></div>
          <input type="number" v-model.number="inputNum" @click.stop="" @blur="numberboxblur()" />
          <div class="plus" @click.stop="inputNumChange(1)"><span></span><span></span></div>
        </div>
        <div class="sure" @click.stop="confirmChangeNum">确定</div>
      </div>
    </div>
    <Dialog
      :dialog="dialog"
      :content="'确认加入购物车吗'"
      @cancel="dialog = false"
      @confirm="confirmCart"
    ></Dialog>
  </view>
</template>
<script>
import { setCarts } from '@/api/invoicer'
import Dialog from '@/components/dialog/index.vue'

export default {
  components: {
    Dialog
  },
  props: {
    ids: {
      type: String,
      default: ''
    },
    commodityObj: {
      type: Object,
      default: () => {}
    },
    // detail:订单详情  goods：商品搜索
    // cart： 购物车 settlement： 订单结算
    type: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isChangeNum: false,
      inputNum: 1,
      dialog: false,
      addCartsStatus: true,
      num: this.commodityObj.num || this.commodityObj.pack || 1,
      price: 0
    }
  },
  created() {
    if (this.type === 'goods') {
      this.price = this.commodityObj.price || this.commodityObj.cost
    }
    if (this.type === 'cart') {
      this.price = this.commodityObj.cartPrice
    }
    if (this.type === 'settlement') {
      this.price = this.commodityObj.cartPrice
    }
  },
  methods: {
    //cart goods 改价格blur事件
    verify() {
      // if (this.commodityObj.price && this.price < this.commodityObj.price) {
      // 	this.price = this.commodityObj.price
      // 	uni.showToast({
      // 		icon: 'none',
      // 		title: `不能低于${this.commodityObj.price}`
      // 	})
      // }
      // if (!this.commodityObj.price && this.price < this.commodityObj.cost) {
      // 	this.price = this.commodityObj.cost
      // 	uni.showToast({
      // 		icon: 'none',
      // 		title: `不能低于${this.commodityObj.cost}`
      // 	})
      // }
      if (!this.price) {
        this.price = this.commodityObj.price || this.commodityObj.cost
      }
      if (this.type == 'cart') {
        this.$emit('updatePrice', { id: this.commodityObj.id, price: Number(this.price) })
      }
    },
    numberChange() {
      this.isChangeNum = true
      this.inputNum = this.num
    },
    numberboxblur() {
      this.inputNum % this.commodityObj.pack < this.commodityObj.pack
        ? (this.inputNum =
            parseInt(this.inputNum / this.commodityObj.pack) * this.commodityObj.pack)
        : ''
      this.inputNum ? '' : (this.inputNum = this.commodityObj.pack)
    },

    changeNum(val) {
      if (val > 0) {
        this.num += this.commodityObj.pack
      } else {
        this.num -= this.commodityObj.pack
      }
      if (this.num < 1) this.num = 1
      this.$emit('updateNum', { id: this.commodityObj.id, num: this.num })
    },
    inputNumChange(val) {
      if (val > 0) {
        this.inputNum += this.commodityObj.pack
      } else {
        this.inputNum -= this.commodityObj.pack
      }
      if (this.inputNum < 1) this.inputNum = 1
    },
    confirmChangeNum() {
      this.$emit('updateNum', { id: this.commodityObj.id, num: this.inputNum })
      this.isChangeNum = false
      this.num = this.inputNum
    },
    //加入购物车
    confirmCart() {
      this.dialog = false
      let params = {
        num: this.num,
        price: this.price,
        purchaserId: this.ids,
        skuId: this.commodityObj.id
      }
      setCarts(params).then(r => {
        if (r.code === 200) {
          uni.showToast({ icon: 'none', title: r.msg })
        }
      })
    },
    addCart() {
      this.dialog = true
    }
  }
}
</script>

<style lang="scss">
.display {
  display: flex;
}

.flex-baseline {
  align-items: baseline;
}

.font-c-blue {
  color: #2871fc !important;
}

.font-c-red {
  color: #fe544e !important;
}

.display-s-center {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.commodity {
  // margin-bottom: 20rpx;
  // padding: 34rpx 25rpx;
  // border-radius: 11rpx;
  // background-color: #fff;

  .title {
    margin-bottom: 70rpx;
    font-weight: 500;
    font-size: 33rpx;
    color: #000000;
  }

  .detail-box {
    .order-border {
      border-top: 1rpx solid #f3f3f3;
      border-bottom: 1rpx solid #f3f3f3;
    }

    .detail {
      // padding: 35rpx 0;

      .line-1 {
        margin-bottom: 26rpx;
        font-weight: 500;

        .name {
          font-size: 29rpx;
        }

        .tag {
          margin-left: 18rpx;
          text-align: center;
          width: 56rpx;
          height: 28rpx;
          border-radius: 6rpx;
          border: 1px solid #ef231b;
          color: #ef231b;
          font-size: 19rpx;
        }

        .num {
          font-weight: 400;
          font-size: 29rpx;
          color: #8d8d8d;
        }
      }

      .line-2 {
        font-weight: 400;
        font-size: 25rpx;
        color: #8d8d8d;

        .label {
          margin-bottom: 20rpx;
          margin-right: 10rpx;
          // width: 90rpx;
        }

        .text {
          max-width: 80%;
        }

        // .manufacturers {
        // 	margin-bottom: 20rpx;
        // 	width: 400rpx;
        // 	text-overflow: ellipsis;
        // 	overflow: hidden;
        // 	word-break: break-all;
        // 	white-space: nowrap;
        // }

        // .indate {
        // 	margin-bottom: 29rpx;
        // }
      }

      .line-3 {
        justify-content: space-between;

        .pirce {
          font-weight: 400;
          font-size: 29rpx;
          color: #000000;
        }

        .num {
          font-weight: 400;
          font-size: 25rpx;
          color: #2871fc;
          line-height: 33rpx;
        }
      }
    }

    .unfold {
      justify-content: center;
      padding-top: 35rpx;
      font-size: 29rpx;
      color: #000000;
      text-align: center;

      .icon-down {
        transform: rotate(270deg);
      }
    }
  }
}

.cart-info {
  // width: 100%;

  .price-num {
    // width: 100%;
    justify-content: space-between;

    .price {
      padding: 0 30rpx;
      text-align: center;
      width: 127rpx;
      height: 56rpx;
      background: #f9f9f9;
      border-radius: 11rpx;
    }

    .measurement {
      font-weight: 400;
      font-size: 25rpx;
      color: #8d8d8d;
    }

    .good-num {
      .subtract,
      .add {
        position: relative;
        width: 40rpx;
        height: 40rpx;
      }

      .subtract::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 25rpx;
        height: 3rpx;
        background: #8d8d8d;
        border-radius: 1rpx;
      }

      .add::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 25rpx;
        height: 3rpx;
        background: #8d8d8d;
        border-radius: 1rpx;
      }

      .add::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 3rpx;
        height: 25rpx;
        background: #8d8d8d;
        border-radius: 1rpx;
      }

      .num {
        margin: 0 10rpx;
        width: 81rpx;
        height: 56rpx;
        line-height: 56rpx;
        background: #f9f9f9;
        border-radius: 11rpx;
        text-align: center;
      }
    }
  }
}

.bgc {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 999;
}

.addCar {
  position: fixed;
  top: 50%;
  left: 50%;
  background: #ffffff;
  border-radius: 11rpx;
  z-index: 1000;
  width: 500rpx;
  height: 302rpx;
  transform: translate(-50%, -50%);

  .addNum {
    display: flex;
    justify-content: space-between;
    margin: 69.44rpx;
    margin-bottom: 47.22rpx;

    .reduce {
      display: inline-block;
      width: 58rpx;
      height: 58rpx;
      border: 1px solid #2871fc;
      border-radius: 8rpx;
      position: relative;

      i {
        display: inline-block;
        width: 31rpx;
        height: 1rpx;
        background: #2871fc;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }

  input {
    display: block;
    width: 201rpx;
    height: 58rpx;
    border: 1px solid #2871fc;
    border-radius: 8rpx;
    color: #ef231b;
    text-align: center;
  }

  .plus {
    display: inline-block;
    width: 58rpx;
    height: 58rpx;
    border: 1px solid #2871fc;
    border-radius: 8rpx;
    position: relative;

    span:nth-child(1) {
      display: inline-block;
      width: 31rpx;
      height: 1rpx;
      background: #2871fc;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    span:nth-child(2) {
      display: inline-block;
      width: 1rpx;
      height: 31rpx;
      background: #2871fc;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

  .sure {
    width: 326rpx;
    height: 58rpx;
    line-height: 58rpx;
    background: #2871fc;
    border-radius: 29rpx;
    font-size: 29rpx;
    font-weight: 400;
    color: #ffffff;
    text-align: center;

    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>
